<template>
  <div>
    <!-- 返回 -->
    <top-back>
      <template v-slot:back>我的订单</template>
    </top-back>

    <!-- tab切换 -->
    <ul>
      <li
        v-for="(item, index) in tabList"
        :key="index"
        @click="onTab(index)"
        :class="item.className"
      >
        <span> {{ item.txt }} </span>
      </li>
    </ul>

    <router-view></router-view>
  </div>
</template>

<script>
import TopBack from '@/components/Mine/TopBack'

export default {
  name: 'MyOrder',
  components: { TopBack },
  data () {
    return {
      tabList: [
        { txt: '全部', url: '/allorders', className: '' },
        { txt: '待付款', url: '/topay', className: '' },
        { txt: '待发货', url: '/toship', className: '' },
        { txt: '待收货', url: '/toreceive', className: '' },
        { txt: '待评价', url: '/toappraise', className: '' }
      ]
    }
  },
  methods: {
    onTab (index) {
      this.$router.replace(this.tabList[index].url)
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  height: 1rem;
  line-height: 1rem;
  li {
    width: 15%;
    height: 0.8rem;
    margin: 0.1rem 0;
    text-align: center;
  }
  span {
    font-size: 14px;
    color: #333;
  }
  .active {
    border-bottom: 1px solid #ff6600;
  }
}
</style>
